<template>
  <div class="content-container">
    
    <el-scrollbar
      class="content-component__scroll"
    >
      <div class="header">
        账号授权
      </div>
      
      <div class="content">
        <el-row v-if="account != null" class="account-list" :gutter="40">

          <el-col class="account-item" :span="4" v-for="(item,index) in account" :key="index">
            <a class="plat" :href="item.loginUrl" target="_blank">
              <div class="logo-wrap">
                <img :src="item.img">
                <span>{{item.platformName}}</span>
              </div>
              <div class="icon-wrap">
                <i class="icon iconfont ipc-add-bg"></i>
              </div>
              
            </a>
          </el-col>

        </el-row>
      </div>
    </el-scrollbar>  
  </div>

</template>

<script>
import account from "./account"
import { list } from "@/api/account/bind"
export default {
  name: 'bind',
  computed: {
    
  },
  data(){
  	return{
  		account:null
  	}
  },
  mounted(){
  	this.getList();
  },
  methods:{
    //获取平台列表
  	getList(){
      list().then((res)=>{
        console.log("----------获取平台列表------------")
        console.log(res)
        this.account = this.convertPlatformList(res.data.data)

        console.log(this.account)
      })
    },
    //转换平台列表数据
    convertPlatformList(data){
      for(var i=0;i<data.length;i++){
        data[i]['img'] = require('@/assets/dingNiu/platform-logo/'+data[i].platformCode+'.png')
      }

      return data;
    }
   
  }
}
</script>

<style>
  .content-component__scroll{
    width: 100%;
    height: 100%;
    
  }
  .content-component__scroll .el-scrollbar__wrap{
    overflow-x: auto;
  }
</style>


<style scoped>

  .header{
    font-size: 20px;
    font-weight: 700;
    color: #ff8100;
    padding: 20px;
    border-bottom: 1px solid #bbb;  
  }

  .account-list{
    padding: 20px;
    margin-right: 0!important;
    margin-left: 0!important;
  }
  .account-item{
    margin-bottom: 20px;
  }
  .account-item .plat{
    display: flex;
    flex-direction: row;
    background-color: #eee;
    padding:20px 10px;
  }



  .account-item .logo-wrap{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 20px;
  }

  .account-item .logo-wrap>span{
    font-size: 12px;
  }

  .account-item .logo-wrap>img{
    width: 50px;
    height: 50px;
  }

  .icon-wrap{
    display: flex;
    align-items: center;
  }
  .icon-wrap .icon{
    font-size: 18px;
    color: #ff8100;
  }
</style>

<style lang="scss" scoped>
.content {
  &-container {

  }
  
}
</style>
